<template>
  <el-drawer
    :title="isCreate?'添加服务器':'编辑服务器'"
    :visible.sync="drawerVisible"
    :size="'600px'"
    custom-class="data-element-drawer"
  >
    <div class="drawer-body">
      <el-form ref="dataForm" :rules="northboundModelRules" :model="northboundModel" label-width="210px">
        <el-form-item v-if="!isCreate" label="ID" prop="id">
          <div class="static-text">{{ northboundModel.id }}</div>
        </el-form-item>
        <el-form-item label="服务器名称" prop="name">
          <el-input v-model="northboundModel.name" placeholder="服务器名称"/>
        </el-form-item>
        <el-form-item label="域名或IP" prop="ip">
          <el-input v-model="northboundModel.ip" placeholder="域名或IP"/>
        </el-form-item>
        <el-form-item label="端口" prop="port">
          <el-input v-model="northboundModel.port" placeholder="端口"/>
          <el-button type="text" :loading="isSubmitLoading" @click="testNorthbound">
            测试连接 <i v-if="linkStatus" class="el-icon-circle-check"></i>
          </el-button>
        </el-form-item>
        <el-form-item label="上传网络" prop="linkType">
          <el-select v-model="northboundModel.linkType" placeholder="请选择">
            <el-option v-for="item in linkTypeOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="网管" prop="manager">
          <el-switch v-model="northboundModel.manager" :disabled="!isCreate"></el-switch>
        </el-form-item>
        <el-form-item v-if="!northboundModel.manager" label="数据中心" prop="dataCenter">
          <el-switch v-model="northboundModel.dataCenter" :disabled="!isCreate"></el-switch>
        </el-form-item>
        <template v-if="northboundModel.dataCenter&&!northboundModel.manager">
          <el-form-item label="密钥（AES Key）" prop="aesSecretKey">
            <el-input v-model="northboundModel.aesSecretKey" :type="KeyType" placeholder="密钥（AES Key）"/>
            <!--<span class="show-pwd" @click="KeyType = KeyType === 'password'?'':'password'">
              <svg-icon :icon-class="KeyType === 'password' ? 'eye' : 'eye-open'"/>
            </span>-->
          </el-form-item>
          <el-form-item label="加密向量（IV）" prop="aesVD">
            <el-input v-model="northboundModel.aesVD" :type="VdType" placeholder="加密向量（IV）"/>
            <!--<span class="show-pwd" @click="VdType = VdType === 'password'?'':'password'">
              <svg-icon :icon-class="VdType === 'password' ? 'eye' : 'eye-open'"/>
            </span>-->
          </el-form-item>
        </template>
        <el-form-item label="是否上传数据" prop="uploadData">
          <el-switch v-model="northboundModel.uploadData"></el-switch>
        </el-form-item>
        <el-form-item label="数据上传周期（分钟）" prop="uploadDataInterval">
          <el-input v-model.number="northboundModel.uploadDataInterval" placeholder="数据上传周期（分钟）"/>
        </el-form-item>
        <el-form-item label="是否上传告警" prop="uploadAlarm">
          <el-switch v-model="northboundModel.uploadAlarm"></el-switch>
        </el-form-item>
        <el-form-item label="告警期数据上传周期（分钟）" prop="intervalWAlarm">
          <el-input v-model.number="northboundModel.intervalWAlarm" placeholder="告警期数据上传周期（分钟）"/>
        </el-form-item>
        <el-form-item label="断点自动续传数据" prop="autoResumeData">
          <el-switch v-model="northboundModel.autoResumeData"></el-switch>
<!--          <div class="tips-text">断点手动确认后续传</div>-->
        </el-form-item>
        <el-form-item label="断点自动续传告警" prop="autoResumeAlarm">
          <el-switch v-model="northboundModel.autoResumeAlarm"></el-switch>
        </el-form-item>
      </el-form>
    </div>
    <div class="drawer-footer">
      <el-button @click="close()">取消</el-button>
      <el-button type="primary" :loading="isSubmitLoading" @click="save()">提交</el-button>
    </div>
  </el-drawer>
</template>
<script>
  import {
    testNorthbound,
    updateNorthbound,
    createNorthbound
  } from "@/api/northbound";
  import {
    northboundTypeOptions,
    linkTypeOptions
  } from '@/utils/enums.js';
  import pattern from '@/utils/pattern.js';

  export default {
    props: {},
    data() {
      return {
        northboundTypeOptions,
        linkTypeOptions,
        northboundModel: {},
        drawerVisible: false,
        isSubmitLoading: false,
        isCreate: false,
        linkStatus: false,
        KeyType: "password",
        VdType: "password",
        northboundModelRules: {
          name: [{ required: true, trigger: "blur", message: "请输入服务器名称" }],
          ip: [
            { required: true, trigger: "blur", message: "请输入域名或IP" }
            // { pattern: pattern.ip, message: "请输入正确的IP地址" }
          ],
          port: [{ required: true, trigger: "blur", message: "请输入端口" }],
          linkType: [{ required: true, trigger: "change", message: "请选择上传网络" }],
          uploadDataInterval: [{ required: true, trigger: "blur", message: "请输入数据上传周期" }],
          aesSecretKey: [{ required: true, trigger: "blur", message: "请输入密钥（AES Key）" }],
          aesVD: [{ required: true, trigger: "blur", message: "请输入加密向量（IV）" }],
          intervalWAlarm: [{ required: true, trigger: "blur", message: "请输入告警期数据上传周期" }]
        }
      };
    },
    computed: {},
    watch: {},
    mounted() {
    },
    methods: {
      show(row) {
        this.resetModal();
        this.isSubmitLoading = false;
        if (row) {
          this.northboundModel = row;
          this.isCreate = false;
        } else {
          this.isCreate = true;
        }
        this.drawerVisible = true;
      },
      clearValidate() {
        this.$nextTick(() => {
          this.$refs["dataForm"].clearValidate();
        })
      },
      resetModal() {
        this.northboundModel = {
          manager: true,
          uploadData: true,
          port: '9910',
          uploadDataInterval: 5,
          linkType: 1,
          intervalWAlarm: 0,
          uploadAlarm: true,
          autoResumeData: true,
          dataCenter: false,
          autoResumeAlarm: true
        };
        this.clearValidate();
      },
      testNorthbound() {
        this.isSubmitLoading = true;
        this.linkStatus = false;
        testNorthbound(this.northboundModel)
          .then((result) => {
            this.linkStatus = result;
            this.isSubmitLoading = false; // 无论成功失败，都把按钮的loading状态取消
          })
          .catch(() => {
            this.isSubmitLoading = false; // 无论成功失败，都把按钮的loading状态取消
          });
      },
      save() {
        this.isSubmitLoading = true;
        this.$refs["dataForm"].validate(valid => {
          if (valid) {
            //
            if (this.isCreate) {
              createNorthbound(this.northboundModel)
                .then(() => {
                  this.success();
                })
                .catch(() => {
                  this.isSubmitLoading = false; // 无论成功失败，都把按钮的loading状态取消
                });
            } else {
              updateNorthbound(this.northboundModel)
                .then(() => {
                  this.success();
                })
                .catch(() => {
                  this.isSubmitLoading = false; // 无论成功失败，都把按钮的loading状态取消
                });
            }
          } else {
            this.isSubmitLoading = false;
            this.$message({
              message: this.$t("formIsNotValidMessage"),
              type: "warning"
            });
          }
        });
      },
      success() {
        this.$message({
          message: this.isCreate ? "添加成功" : "编辑成功",
          type: "success"
        });
        this.isSubmitLoading = false; // 无论成功失败，都把按钮的loading状态取消
        this.close();
        this.$emit("save", this.isCreate);
      },
      close() {
        this.drawerVisible = false;
        this.isSubmitLoading = false; // 无论成功失败，都把按钮的loading状态取消
      }
    }
  };
</script>

<style lang="scss">
  .data-element-drawer {
    .el-drawer__body {
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .drawer-body {
      flex: 1;
      overflow: auto;
      padding-bottom: 56px;

      .el-input {
        max-width: 360px;
      }

      .el-select {
        width: 360px;
      }
      .show-pwd {
        font-size: 16px;
        color: #889aa4;
        cursor: pointer;
        user-select: none;
      }
    }

    .drawer-footer {
      padding: 10px;
      background-color: #eef1f6;
      text-align: right;

      button {
        min-width: 100px;
      }
    }
  }

  .static-text {
    display: inline-block;
  }

  .tips-text {
    display: inline-block;
    font-size: small;
    margin-left: 5px;
    color: #999999;
  }
  .form-alert{
    line-height: 1;
    max-width: 360px;
  }
</style>
